<template>
    <div class="page-hire-app">
        <div class="scroll">
            <router-view></router-view>
        </div>
        <div class="menu">
            <van-tabbar v-model="active">
                <van-tabbar-item icon="browsing-history" :to="{name: 'hireFind'}">
                    <img slot="icon" slot-scope="props" :src="props.active ? icons.find.active : icons.find.normal" >
                </van-tabbar-item>
                <van-tabbar-item icon="balance-pay" :to="{name: 'hireOrder'}">
                    <img slot="icon" slot-scope="props" :src="props.active ? icons.order.active : icons.order.normal" >
                </van-tabbar-item>
                <van-tabbar-item icon="setting" :to="{name: 'hireUser'}" >
                    <img slot="icon" slot-scope="props" :src="props.active ? icons.user.active : icons.user.normal" >
                </van-tabbar-item>
            </van-tabbar>
        </div>
    </div>
</template>

<script>
import {setOpenId} from '../api/user'
export default {
    data(){
        return {
            active: 0,
            icons: {
                find: {
                    normal: require('../../../assets/img/index/find@3x.png'),
                    active: require('../../../assets/img/index/find_active@3x.png'),
                },
                order: {
                    normal: require('../../../assets/img/index/order@3x.png'),
                    active: require('../../../assets/img/index/order_active@3x.png'),
                },
                user: {
                    normal: require('../../../assets/img/index/mine@3x.png'),
                    active: require('../../../assets/img/index/mine_active@3x.png'),
                }
            }
        }
    },
    created(){
        try {
            const keys = Object.keys(this.icons)
            this.active = keys.indexOf(this.$route.path.split('/')[3])
        } catch (error) {
            console.log(error)
        }
        if((process.env.NODE_ENV === 'development')) {
            setOpenId()
        }
    }
}
</script>

<style lang="less">
.page-hire-app{
    height: 100%;
    display: flex;
    flex-direction: column;
    .scroll{
        flex: 1;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .menu{
        overflow: hidden;
        .van-tabbar{
            .van-tabbar-item{
                .van-tabbar-item__icon{
                    margin: 0 auto;
                    &>img{
                        display: block;
                        margin: 0 auto;
                        height: 24px;
                    }
                }
                .van-tabbar-item__text{
                    display: none;
                }
                &.van-tabbar-item--active{
                    .van-tabbar-item__icon{
                        &>img{
                            margin-top: 8px;
                            height: 36px;
                        }
                    }
                }
            }
        }
    }
}
</style>

